<template>
  <div class="home">
      <el-row class="query">
        <el-col :span="2" :offset="2"><div style="font-weight: bold;">搜索模块</div></el-col>
        <el-col :span="16"><div>
          <el-autocomplete style="width: 100%;" v-model="moduleName" :fetch-suggestions="querySearchModule" placeholder="请输入内容" @select="handleSelectModule"></el-autocomplete>
        </div></el-col>
        <el-col :span="2"><div><el-button type="primary" @click="getModuleList">查询更多</el-button></div></el-col>
      </el-row>
      <el-row>
        <el-col :span="5" style="height:1100px;border-right: 1px #c8c6c6 solid;"><div>
          <h2 style="text-align: left;">高手榜</h2>
          <div v-for="(item,index) in topUserList" :key="index">
            <el-row style="border-bottom: 1px #c8c6c6 solid;">
              <el-col :span="10">
                <div :style="(index === 0?'background-color: red;':index === 1?'background-color: green;':index===2?'background-color: blue;':'background-color: grey;')+'height: 60px;width: 60px;border-radius: 30px;margin: 10px;line-height: 60px;font-size: large;font-weight: bold;color: white;'">{{ index+1 }}</div>
              </el-col>
              <el-col :span="14" style="text-align: left;">
                <div style="line-height: 40px;font-size: larger;font-weight: bold;">{{ item.userName }}</div>
                <div style="line-height: 40px;font-size: larger;">采纳数：{{ item.adoptCount }}</div>
              </el-col>
            </el-row>
          </div>
        </div></el-col>
        <el-col :span="19" style="padding-left: 20px;"><div>
          <!-- <el-row>
            <el-col :span="6">
              <div style="height: 60px;font-size: 60px;line-height: 60px;margin-top: 30px;font-weight: bold;color: #539700;">{{ dayCount }}</div>
              <div style="height: 60px;font-size: 20px;line-height: 60px;font-weight: bold;">本日发表话题数量</div>
            </el-col>
            <el-col :span="12"><div>
              <div id="pieChart" style="height:200px;width:100%;"></div>
            </div></el-col>
            <el-col :span="6"><div style="font-size: 20px;line-height: 80px;font-weight: bold;">
              <div v-if="userType !== null">
                <div>欢迎 ~，{{ userName }}</div>
                <div>用户角色：{{ 'admin' === userType?'管理员':'auditors' === userType ?'审核员':'普通用户' }}</div>
              </div>
              <div v-else>暂无用户信息，未登录</div>
            </div></el-col>
          </el-row> -->
          <el-row>
            <el-col :span="12"><div v-if="userType !== null">欢迎 ~，{{ userName }}</div></el-col>
            <el-col :span="12"><div>
              <div v-if="userType !== null">
                <div>用户角色：{{ 'admin' === userType?'管理员':'auditors' === userType ?'审核员':'普通用户' }}</div>
              </div>
              <div v-else>暂无用户信息，未登录</div>
            </div></el-col>
          </el-row>
          <div style="clear: both;">
            <el-divider content-position="left"><h3><i class="el-icon-position"></i> 模块列表</h3></el-divider>
            <div style="text-align: left;clear: both;">
              <div v-for="(item,index) in moduleList" :key="index" class="module" @click="goToQuestion(item.id,item.name)">
                <div class="module-index">{{ index+1 }}</div>
                <div class="module-name">{{ item.name }}</div>
              </div>
            </div>
            <div style="clear: both;text-align: right;">
              <el-pagination background layout="prev, pager, next" :total="total" @current-change="currentChange"></el-pagination>
            </div>
          </div>
          <div>
            <el-divider content-position="left"><h3><i class="el-icon-position"></i> 提问动态</h3></el-divider>
            <el-row style="line-height: 30px;">
              <el-col :span="2">标题</el-col>
              <el-col :span="6"><el-input size="small" v-model="questionTitle" placeholder="请输入关键字..."></el-input></el-col>
              <el-col :span="2">内容</el-col>
              <el-col :span="6"><el-input size="small" v-model="questionContent" placeholder="请输入关键字..."></el-input></el-col>
              <el-col :span="2"><el-button size="small" type="primary" @click="getQuestionList">查询</el-button></el-col>
            </el-row>
            <div>
              <div v-for="(item,index) in questionList" :key="index" class="question">
                <div style="font-size: large;margin-top: 10px;"><el-button type="text" style="font-size: large;" @click="goToQuestion(item.m_id,item.moduleName)">{{ item.moduleName }}</el-button></div>
                <div style="font-size: large;color: #005097;margin-top: 10px;"><el-button style="font-size: large;" type="text" @click="goToReply(item.id)">{{ item.title }}</el-button></div>
                <div style="color: #666666;margin-top: 10px;margin-bottom: 10px;">{{ item.content }}</div>
                <div v-if="item.img.length > 0">
                  <img v-for="(img,index) in item.imgList" :key="index" style="height: 100px;width: 150px;" :src="imgUrl+img" />
                </div>
                <div v-else-if="item.video.length > 0">
                  <video :src="imgUrl+item.video" type="video/mp4" controls="controls" style="height: 300px;width: auto;"></video>
                </div>
                <div style="color: #666666;margin-top: 10px;font-size: small;"><i class="el-icon-user"></i> {{ item.userName }} <i class="el-icon-alarm-clock"></i> {{ item.formatTime }}</div>
              </div>
            </div>
            <div style="clear: both;text-align: right;">
              <el-pagination background layout="prev, pager, next" :total="questionTotal" @current-change="currentChangeQuestion"></el-pagination>
            </div>
          </div>
        </div></el-col>
      </el-row>
      <Login :dialog-visible="loginShow" @closeLoginDialog="closeLoginDialog"></Login>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { getDayCount, getTop5ByQuestionCount, listModule, listQuestion, listTop10User } from '@/api/api'
import {formatDate, timestampToTime} from '@/util/dateUtil'
import Login from '@/components/Login.vue'
export default {
  name: 'HomeView',
  components: {
    Login
  },
  data(){
    return {
      userId: 0,
      userImg: '',
      userGender: '',
      userName: '',
      userPhone: '',
      userBirthday: '',
      userType: '',
      loginShow:false,
      imgUrl: '',
      moduleName: '',
      moduleList: [],
      current: 1,
      size: 12,
      total: 0,
      questionTitle: '',
      questionContent: '',
      questionCurrent: 1,
      questionSize: 10,
      questionTotal: 0,
      questionList: [],
      topUserList:[],
      dayCount: 0,
      timestamp: new Date()
    }
  },
  mounted(){
    const that = this
    that.imgUrl = that.$store.state.imgUrl
    that.getUserMessage()
    that.getModuleList()
    that.getQuestionList()
    that.getTopUserList()
    // that.getTop5ByQuestionCount()
    // that.getDayCount()
  },
  methods: {
    getPieChart(data) {
      const chartBox = echarts.init(document.getElementById("pieChart"));
      const option = {
        title: {
          text: '本日发题量TOP5模块',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        // legend: {
        //   top: '5%',
        //   left: 'center'
        // },
        series: [
          {
            type: 'pie',
            radius: ['40%', '70%'],
            center: ['50%', '70%'],
            // adjust the start and end angle
            startAngle: 180,
            endAngle: 360,
            data: data
          }
        ]
      };
      chartBox.setOption(option);
    },
    getUserMessage:function(){
      const that = this
      that.userId = localStorage.getItem('userId')
      that.userImg = localStorage.getItem('userImg')
      that.userGender = localStorage.getItem('userGender')
      that.userName = localStorage.getItem('userName')
      that.userPhone = localStorage.getItem('userPhone')
      that.userBirthday = localStorage.getItem('userBirthday')
      that.userType = localStorage.getItem('userType')
    },
    getTop5ByQuestionCount:function(){
      const that = this
      getTop5ByQuestionCount({
        day:formatDate(that.timestamp)
      }).then(res => {
        let data = []
        res.data.forEach(item => {
          data.push({
            value: item.questionCount,
            name: item.module.name
          })
        })
        that.getPieChart(data)
      })
    },
    getDayCount:function(){
      const that = this
      getDayCount().then(res => {
        that.dayCount = res.data
      })
    },
    getTopUserList:function(){
      const that = this
      listTop10User().then(res => {
        that.topUserList = res.data
      })
    },
    openLoginDialog:function(){
      const that = this
      that.loginShow = true
    },
    closeLoginDialog:function(){
      const that = this
      that.loginShow = false
    },
    getQuestionList:function(){
      const that = this
      listQuestion({
        title: that.questionTitle,
        content: that.questionContent,
        current: that.questionCurrent,
        size: that.questionSize
      }).then(res => {
        that.questionTotal = res.data.total
        let questionList = res.data.records
        questionList.forEach(element => {
          element.imgList = element.img.split(',')
          element.formatTime = timestampToTime(element.time)
        });
        that.questionList = questionList
      })
    },
    getModuleList:function(){
      const that = this
      listModule({
        name: that.moduleName,
        current: that.current,
        size: that.size
      }).then(res => {
        that.total = res.data.total
        that.moduleList = res.data.records
      })
    },
    userManage:function(){
      this.$router.push('/user-manage')
    },
    checkManage:function(){
      this.$router.push('/module-manage')
    },
    handleSelectModule:function(item){
      const that = this
      that.goToQuestion(item.id,item.value)
    },
    querySearchModule:function(queryString, cb){
      const that = this
      console.log(queryString)
      listModule({
        name: queryString,
        current: 1,
        size: 10
      }).then(res => {
        let moduleList = res.data.records
        let result = []
        moduleList.forEach(element => {
          result.push({
            value: element.name,
            id: element.id
          })
        });
        cb(result)
      })
    },
    currentChange:function(current){
      const that = this
      that.current = current
      that.getModuleList()
    },
    currentChangeQuestion:function(current){
      const that = this
      that.questionCurrent = current
      that.getQuestionList()
    },
    goToQuestion:function(id,name){
      const that = this
      that.$router.push('/question?m_id='+id+'&m_name='+name)
    },
    goToReply:function(id){
      const that = this
      that.$router.push('/reply?q_id='+id)
    },
    goToQuestion:function(id,name){
      const that = this
      that.$router.push('/question?m_id='+id+'&m_name='+name)
    }
  }
}
</script>
<style>
.query{
  height: 100px;
  line-height: 100px;
}
.rank{
  background-color: #4AAAEE;
  margin-right: 5px;
}
.module{
  display: flex;
  height: 100px;
  width: 22%;
  min-width: 100px;
  background-color: #E1F3FF;
  border-radius: 10px;
  float: left;
  margin-left: 20px;
  margin-top: 20px;
  color: #706f6f;
}
.module>.module-index:nth-child(1){
  order: 1;
  height: 40px;
  width: 40px;
  border-radius: 20px;
  background-color: white;
  text-align: center;
  line-height: 40px;
  font-weight: bold;
  margin: 10px;
  font-size: large;
}
.module>.module-name:nth-child(2){
  order: 2;
  font-size: large;
  min-width: 50px;
  width: 60%;
  height: 75%;
  font-weight: bold;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  margin: 10px;
}
.question{
  text-align: left;
  margin-top: 20px;
}
</style>
